/**
 * 懒加载图片
 * @param {*} defUrl 默认加载图片路径
 */
function lazyImages(defUrl) {
    var imgs = document.getElementsByTagName('img');
    imgs = Array.from(imgs); //将imgs类数组转为真数组
    // console.log(imgs);
    // 设置默认加载图片
    loadDefaultImages(defUrl);
    loadImages();

    var handler = debounce(loadImages,400);
    window.addEventListener('scroll',function(){
        //防抖处理
        handler();
    })
    /**
     * 懒加载图片
     */
    function loadImages() {
        for (let i = 0; i < imgs.length; i++) {
            var img = imgs[i];
            //加载一张图片
            if(loadImg(img)){
                //加载过了 就不用加载了
                imgs.splice(i,1); //从数组中去掉
                i--; //去掉数组了要i--
            }
        }
    }

    /**
     * 加载一张图片,这张图片是在可视区里面的
     * @param {*} img 
     */
    function loadImg(img) {
        // console.log(img);
        //getBoundingClientRect 用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
        //注意img的宽高要固定 不然top有问题
        var rect = img.getBoundingClientRect();
        // console.log(rect);
        // console.log(document.documentElement.clientWidth);
        // console.log(document.documentElement.clientHeight);
        
        //判断这张图片是否在可视区范围内
        if (rect.right > 0 && rect.left < document.documentElement.clientWidth &&
            rect.bottom > 0 && rect.top < document.documentElement.clientHeight) {
            //图片在视口中，则赋值src
            img.src = img.dataset.src;
            
            return true; //代表加载过了
        }
        return false; //表示还没加载过
    }
    function loadDefaultImages(defUrl) {
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].src = defUrl;
        }
    }
    function debounce(callback,time){
        var timer;
        return function(){
            clearTimeout(timer);
            timer = setTimeout(()=>{
                callback.apply(null,arguments);
            },time);
        }
    }
}